﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>用户信息</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/lobsteruiframe/weui/css/weui.css" />
    <link rel="stylesheet" href="/lobsteruiframe/weui/css/weuix.css" />
    <script src="/lobsteruiframe/weui/js/zepto.min.js"></script>
    <script src="/lobsteruiframe/weui/js/zepto.weui.js"></script>
    <script src="/jslib/lobster.js"></script>
    <!-- OSS需要引用此文件 -->
    <script src="/jslib/aliyun-oss-sdk.min.js"></script>
</head>

<body ontouchstart>
    <div class="weui-btn_default weui-header ">
        <div class="weui-header-left"> <a class="icon icon-109 f-green" href="#" onclick="self.location=document.referrer;"></a> </div>
        <h1 class="weui-header-title f-green">个人信息</h1>
    </div>

    <form id="userform">
        <div class="weui-cells weui-cells_form" id="user">
            <div class="weui-cell weui-cell_access" id="uploader">
                <div class="weui-cell__hd"><label class="weui-label">头像</label></div>
                <div class="weui-cell__bd"></div>
                <div class="weui-cell__ft">
                    <input type="hidden" name="ImgUrl" />
                    <div class="weui-avatar-circle">
                        <img id="ImgUrl" src="/node_modules/lobsteruiframe/weui/favicon.png">
                        <input id="uploaderInput" class="weui-uploader__input" type="file"
                               accept="image/jpg,image/jpeg,image/png" />
                    </div>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">昵称</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入昵称" name="Nickname">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="MobileNo" type="text" value="" disabled>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="UserName" type="text" value="">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">性别</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" placeholder="请选择性别" name="Sex" type="text" id="Sex" weui-type="select">
                </div>
            </div>

            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">生日</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="Birthday" type="text" id="Birthday" weui-type="datetimePicker" value="">
                </div>
            </div>
            <div class="weui-btn-area">
                <a href="javascript:void(0)" id="save" class="weui-btn weui-btn_primary">保存</a>
            </div>
        </div>
    </form>
</body>

</html>

<script>

    lobsterh5.main({
        data: {
            right: null,
            myinfo: {
                "ID": 0,
                "MPUserId": "",
                "MobileNo": "",
                //"DelFlag": 0,
                "ImgUrl": "",
                "Nickname": "",
                "UserName": "",
                "Sex": 1,
                //"UserSex": "男",
                //"UserBirthday": "1985-10-27 00:00:00",
                "Birthday": "2000-10-27",
                "WxUserInfoflag": 0
            }
        },
        //初始化页面
        pageload: function (right) {
            this.data.right = right;
            this.initevent();
            this.GetUser();
        },
        //初始化事件
        initevent: function () {
            var self = this;

            $("#Sex").select({
                title: "选择性别",
                items: [
                    {
                        title: "男",
                        value: "1",
                    },
                    {
                        title: "女",
                        value: "2",
                    },
                    {
                        title: "未知",
                        value: "0",
                    }
                ]
            });

            $("#Birthday").datetimePicker({
                title: '生日',
                value: '2000-01-01',
                years: 2000,
                times: function () { return []; },
                parse: function (str) {
                    return str.split("-");
                },
                onChange: function (picker, values, displayValues) {
                    console.log(values);
                }
            });

            //上传文件
            lobsterh5.OSSUploadFile('#uploaderInput', function (res) {
                console.log(res);
                //self.data.$layui.element.progress('progress', Math.round(res * 100) + '%');
            }, function (res) {
                console.log(res);
                $("#ImgUrl").attr("src", res.url);
                $("input[name='ImgUrl']").val(res.url);
            })

            //保存数据
            $("#save").click(function () {
                self.SaveUser();
            });
        },
        GetUser: function () {
            var self = this;
            $.showLoading("拼命加载中...");
            lobsterh5.GET("/admin/v1/CHome/GetMPUser").then(data => {
                self.data.myinfo = data.user;

                lobsterh5.WeUISetForm('#userform', self.data.myinfo);
                $("#ImgUrl").attr("src", self.data.myinfo.ImgUrl);

                $.hideLoading();

            }).catch(res => {
                $.toast('获取信息失败', 'forbidden');
            })
        },
        SaveUser: function () {
            var self = this;
            var myinfo = self.data.myinfo;
            var formval = lobsterh5.WeUIGetForm('#userform', myinfo);
            console.log(formval);

            $.showLoading("保存中...");

            if (!myinfo.Nickname) {
                $.toptip("请填写昵称");
                $.hideLoading();
                return;
            }

            if (!myinfo.UserName) {
                $.toptip("请填写姓名");
                $.hideLoading();
                return;
            }

            if (!myinfo.Sex) {
                $.toptip("请选择性别");
                $.hideLoading();
                return;
            }

            if (!myinfo.Birthday) {
                $.toptip("请选择生日");
                $.hideLoading();
                return;
            }
            myinfo.UserSex = myinfo.Sex;
            myinfo.UserBirthday = myinfo.Birthday;
            lobsterh5.POST("/admin/v1/CHome/SaveMpUser", myinfo).then(data => {
                $.hideLoading();
                $.toast('保存成功', 'text');
            }).catch(res => {
                $.hideLoading();
                $.toast(res.msg, 'forbidden');
            })
        }
    });
</script>